
import { Button, Tooltip, Popover, Badge, Icon } from 'antd';
import { WeaColorPicker, WeaUpload, WeaBrowser, WeaLocaleProvider } from 'ecCom';
import { each } from 'lodash';
import * as React from 'react';
import { BorderType } from '../../../constants/excel';
import Divider from '../../common/divider';
import DropSelect from '../../common/drop-select';
import * as CommonAction from './action/common';
import getCellTypeName from '../../../utils/getCellTypeName';
const getLabel = WeaLocaleProvider.getLabel;
export const fontFamilyOptions = ['宋体', '仿宋', '微软雅黑', '微软雅黑 Light', '新宋体', '楷体', '等线', '黑体',
    'Malgun Gothic', 'Malgun Gothic Semilight', 'Microsoft JhengHei', 'Microsoft JhengHei Light', 'Microsoft JhengHei UI',
    'Microsoft JhengHei UI Light', 'Microsoft YaHei UI', 'Microsoft YaHei UI Light', 'Calibri'];
const fontSizeArray = [];
for (let i = 5; i < 36; i++) {
    fontSizeArray.push(i * 2);
}
export const fontSizeOptions = fontSizeArray.map(d => ({
    id: '' + d,
    showname: '' + d
}));

export const lineArr = [
    { id: BorderType.Bottom, icon: 'icon-edc-common-border-bottom', showname: <div><i className="icon-edc-common-border-bottom mr-1" />{getLabel('505918','下边框')}</div>,title: getLabel('505918','下边框')},
    { id: BorderType.Top, icon: "icon-edc-common-border-top", showname: <div><i className="icon-edc-common-border-top  mr-1" />{getLabel('505919','上边框')}</div>,title: getLabel('505919','上边框')},
    { id: BorderType.Left, icon: 'icon-edc-common-border-left', showname: <div><i className="icon-edc-common-border-left  mr-1" />{getLabel('505920','左边框')}</div>,title: getLabel('505920','左边框')},
    { id: BorderType.Right, icon: "icon-edc-common-border-right", showname: <div><i className="icon-edc-common-border-right  mr-1" />{getLabel('505921','右边框')}</div>,title: getLabel('505921','右边框')},
    { id: BorderType.None, icon: "icon-edc-common-border-none", showname: <div><i className="icon-edc-common-border-none  mr-1" />{getLabel('505922','无边框')}</div>,title: getLabel('505922','无边框')},
    { id: BorderType.All, icon: "icon-edc-common-border-all", showname: <div><i className="icon-edc-common-border-all  mr-1" />{getLabel('505923','所有框线')}</div>,title: getLabel('505923','所有框线')},
    { id: BorderType.OutLine, icon: "icon-edc-common-border-outer", showname: <div><i className="icon-edc-common-border-outer  mr-1" />{getLabel('505924','外侧框线')}</div>,title: getLabel('505924','外侧框线')}

];
export const cellTypeOptions = [{
    id: 'empty',
    showname: <div> <div style={{ width: 17, border: '1px solid #eaeaea', height: 10, display: 'inline-block' }} /><span className="ml-1" >{getLabel('502326', '空')}</span></div>
}, {
    id: 'input',
    showname: <div><i className="icon-mode-input" style={{ fontSize: 16 }} /><span className="ml-1" >{getLabel('502327', '文本框')}</span></div>
}, {
    id: 'check',
    showname: <div><i className="icon-mode-checkbox" style={{ fontSize: 16 }} /><span className="ml-1" >{getLabel('502309', 'Check框')}</span></div>
}, {
    id: 'select',
    showname: <div> <i className="icon-mode-select" style={{ fontSize: 16 }} /><span className="ml-1" >{getLabel('502310', '下拉框')}</span></div>
}, {
    id: 'browser',
    showname: <div><i className="icon-mode-browser" style={{ fontSize: 16 }} /><span className="ml-1" >{getLabel('502308', '浏览框')}</span></div>
}];

export default class TopTools extends React.Component {
    static defaultProps = {
        templateVisible: true,
        fieldVisible: true
    }
    constructor(props) {
        super(props);
        this.state = {
            bold: props.bold,
            cellTypeName: props.cellTypeName,
            fontFamily: props.fontFamily,
            fontSize: props.fontSize,
            hAlign: props.hAlign,
            italic: props.italic,
            spanCell: props.spanCell,
            underline: props.underline,
            vAlign: props.vAlign,
            wordwrap: props.wordwrap,
            disabledSignFields: false,
            clearFieldDisabled: false,
            deleteTableDisabled: true,
            setFieldTypeDisabled: false,
            isAutoFillin: false,
            isAutoFillinDisabled: true,
            dataSourceList: [],
            formulaList: [],
            fieldAssignList:[],
            cusBrowserIds: '',
            cusBrowserType: '',
            isSingle: false,
            broTitle: '',
        }
        this.store = {
            setFieldType: this.changeCellType
        };
        each({ ...CommonAction }, (value, key) => {
            if (typeof value === 'function') {
                this[key] = value.bind(this);
            } else {
                this[key] = value;
            }
        });
    }
    componentWillReceiveProps(nextProps) {
        this.setState({
            bold: nextProps.bold,
            cellTypeName: nextProps.cellTypeName,
            fontFamily: nextProps.fontFamily,
            fontSize: nextProps.fontSize,
            hAlign: nextProps.hAlign,
            italic: nextProps.italic,
            spanCell: nextProps.spanCell,
            underline: nextProps.underline,
            vAlign: nextProps.vAlign,
            wordwrap: nextProps.wordwrap,
            combineSameCell: nextProps.combineSameCell,
            combineSameCellDisabled: nextProps.combineSameCellDisabled,
            readonly: nextProps.readonly,
            disabledSignFields: nextProps.disabledSignFields,
            clearFieldDisabled: nextProps.clearFieldDisabled,
            deleteTableDisabled: nextProps.deleteTableDisabled,
            setFieldTypeDisabled: nextProps.setFieldTypeDisabled,
            isAutoFillin: nextProps.isAutoFillin,
            isAutoFillinDisabled: nextProps.isAutoFillinDisabled,
            dataSourceList: nextProps.dataSourceList || [],
            formulaList: nextProps.formulaList || [],
            fieldAssignList: nextProps.fieldAssignList,
        });
    }
    shouldComponentUpdate(nextProps, nextState) {
        return this.state.backColor !== nextState.backColor
            || this.state.bold !== nextState.bold
            || this.state.border !== nextState.border
            || this.state.fontFamily !== nextState.fontFamily
            || this.state.fontSize !== nextState.fontSize
            || this.state.foreColor !== nextState.foreColor
            || this.state.hAlign !== nextState.hAlign
            || this.state.italic !== nextState.italic
            || this.state.spanCell !== nextState.spanCell
            || this.state.underline !== nextState.underline
            || this.state.vAlign !== nextState.vAlign
            || this.state.wordwrap !== nextState.wordwrap
            || this.state.cellTypeName !== nextState.cellTypeName
            || this.state.combineSameCell !== nextState.combineSameCell
            || this.state.combineSameCellDisabled !== nextState.combineSameCellDisabled
            || this.state.readonly !== nextState.readonly
            || this.state.disabledSignFields !== nextState.disabledSignFields
            || this.state.clearFieldDisabled !== nextState.clearFieldDisabled
            || this.state.deleteTableDisabled !== nextState.deleteTableDisabled
            || this.state.setFieldTypeDisabled !== nextState.setFieldTypeDisabled
            || this.state.isAutoFillin !== nextState.isAutoFillin
            || this.state.isAutoFillinDisabled !== nextState.isAutoFillinDisabled
            || this.state.dataSourceList !== nextState.dataSourceList
            || this.state.formulaList !== nextState.formulaList
            || this.state.fieldAssignList !== nextState.fieldAssignList
            || this.state.cusBrowserIds !== nextState.cusBrowserIds
            || this.state.cusBrowserType !== nextState.cusBrowserType
            || this.state.isSingle !== nextState.isSingle
            || this.state.broTitle !== nextState.broTitle;
    }
    openDataSource = (key) => {
        const { openDataSource } = this.props;
        console.log(key)
        if (typeof openDataSource === 'function') {
            openDataSource(key);
        }
    }
    openFieldAssign = (key) => {
        const { openFieldAssign } = this.props;
        if (typeof openFieldAssign === 'function') {
            openFieldAssign(key);
        }
    }

    deleteFieldAssign = (key) => {
        const { deleteFieldAssign } = this.props;
        if (typeof deleteFieldAssign === 'function') {
            deleteFieldAssign(key);
        }
    }

    deleteDataSource = (key) => {
        const { deleteDataSource } = this.props;
        if (typeof deleteDataSource === 'function') {
            deleteDataSource(key);
        }
    }
    
    render() {
        const { fontFamily, fontSize, bold, italic, underline, border, vAlign, hAlign, wordwrap, spanCell, cellTypeName, backColor, foreColor,
            combineSameCell, combineSameCellDisabled, readonly, disabledSignFields, clearFieldDisabled, deleteTableDisabled, setFieldTypeDisabled,
            isAutoFillin, isAutoFillinDisabled, dataSourceList = [], formulaList = [],fieldAssignList=[] } = this.state;
        const { browserTemplate, newPage, templateVisible, fieldVisible, deleteTable, addDataSource, openAceEditor, openCodeEditor, showContent, 
            browserAutoFillin, formulaVisible, deleteFormula, addFieldAssign, dsMenuVisible, dsShowMenu, faMenuVisible, faShowMenu } = this.props;
        let toolAreaStyle = readonly ? "none" : "auto";

        return (
            <div className="edc-workbook-tools" >
                {templateVisible && [<WeaUpload
                    className="edc-toolbar-item"
                    uploadUrl="."
                    category='string'
                    maxUploadSize={0}
                    maxFilesNumber={1}
                    limitType='xlsx'
                    autoUpload={false}
                    getShowListDatas={this.getShowListDatas}
                >
                    <Button disabled={readonly} className="tool-btn tool-btn-large"><i className="icon-mode-file-excel" />{getLabel('502328', '本地Excel')}</Button>
                </WeaUpload>,
                    <Button disabled={readonly} className="tool-btn tool-btn-large" onClick={newPage}><i className="icon-mode-file-excel" />{getLabel('505908', '新建Excel')}</Button>,
                    <Button disabled={readonly} className="tool-btn tool-btn-large" onClick={browserTemplate}><i className="icon-coms02-Data-center" />{getLabel('502329', '选择模板')}</Button>,
                    
                    dataSourceList.length > 0 ? <Popover
                        placement="bottomLeft"
                        trigger="click"
                        visible={dsMenuVisible}
                        onVisibleChange={dsShowMenu}
                        content={
                            <ul className="menu">
                                {dataSourceList.map(ds => (
                                    <li className="menu-item" title={ds.name}>
                                        <div className="text-elli" style={{ width: 160 }} onClick={this.openDataSource.bind(this, ds.uuid)}>
                                            {ds.name}
                                        </div>
                                        <div className="menu-item-opts"><Icon type="delete" onClick={this.deleteDataSource.bind(this, ds.uuid)} title={getLabel(502286, '删除')}></Icon></div></li>
                                ))}
                                <li style={{ textAlign: 'center' }} ><Button onClick={addDataSource} type="primary" icon="plus" shape="circle"></Button></li>
                            </ul>
                        }
                    >

                        <Button disabled={readonly} className="tool-btn tool-btn-large" title={getLabel('502330', '数据源')}>
                            <Badge count={dataSourceList.length}>
                                <i title={getLabel('502330', '数据源')} className="icon-edc-common-database" />
                            </Badge>
                            <div>{getLabel('502330', '数据源')}</div>
                        </Button>
                    </Popover> : <Button disabled={readonly} onClick={addDataSource} className="tool-btn tool-btn-large" title={getLabel('502330', '数据源')}>
                            <i className="icon-edc-common-database" />
                            <div>{getLabel('502330', '数据源')} </div>
                        </Button>,
                    fieldAssignList.length > 0 ? <Popover
                        placement="bottomLeft"
                        trigger="click"
                        visible={faMenuVisible}
                        onVisibleChange={faShowMenu}
                        content={
                            <ul className="menu">
                                {fieldAssignList.map(fa => (
                                    <li className="menu-item" title={fa.name}>
                                        <div className="text-elli" style={{ width: 160 }} onClick={this.openFieldAssign.bind(this, fa.id)}>
                                            {fa.name}
                                        </div>
                                        <div className="menu-item-opts"><Icon type="delete" onClick={this.deleteFieldAssign.bind(this, fa.id)} title={getLabel(502286, '删除')}></Icon></div></li>
                                ))}
                                <li style={{ textAlign: 'center' }} ><Button onClick={addFieldAssign} type="primary" icon="plus" shape="circle"></Button></li>
                            </ul>
                        }
                    >

                        <Button disabled={readonly} className="tool-btn tool-btn-large" title={'字段赋值'}>
                            <Badge count={fieldAssignList.length}>
                                <i title={'字段赋值'} className="icon-coms-replace" />
                            </Badge>
                            <div>{'字段赋值'}</div>
                        </Button>
                    </Popover> : <Button disabled={readonly} onClick={addFieldAssign} className="tool-btn tool-btn-large" title={'字段赋值'}>
                            <i className="icon-coms-replace" />
                            <div>{'字段赋值'} </div>
                        </Button>,
                <Divider type="vertical" />]}
                <div className="tool-area" style={{pointerEvents: toolAreaStyle}}>
                    <div className="tool-area-row">
                        <DropSelect
                            style={{ width: 130 }}
                            value={fontFamily}
                            onChange={this.changeFontFamily}
                            options={fontFamilyOptions.map(d => ({ id: d, showname: d }))}
                            valueToStyleName="fontFamily"
                        />
                        <DropSelect
                            style={{ width: 50, marginLeft: -1 }}
                            bf="0px"
                            value={fontSize}
                            onChange={this.changeFontSize}
                            options={fontSizeOptions}
                        />
                        <Button onClick={this.upFontSize} className="tool-btn"><i className="icon-mode-font-size-up" /></Button>
                        <Button onClick={this.downFontSize} className="tool-btn"><i style={{ fontSize: 12 }} className="icon-mode-font-size-down" /></Button>
                    </div>
                    <div className="tool-area-row">
                        <Button onClick={this.changeBold} className={`tool-btn${bold ? ' tool-btn-active' : ''}`}><i className="icon-coms-Bold" /></Button>
                        <Button onClick={this.changeItalic} className={`tool-btn${italic ? ' tool-btn-active' : ''}`}><i className="icon-coms-Italic" /></Button>
                        <Button onClick={this.changeUnderline} className={`tool-btn${underline ? ' tool-btn-active' : ''}`}><i className="icon-coms-Underline" /></Button>
                        <Divider type="vertical" style={{ height: 16 }} />
                        <DropSelect
                            onChange={this.changeBorder}
                            options={lineArr}
                            dropWidth={100}
                            isBorder = {true}
                            inputCom={
                                <Button
                                    onClick={this.changeBorder.bind(this, this.state.border)}
                                    className="tool-btn mr-5">
                                    <i className={this.getBorder(border)} />
                                </Button>
                            }
                        />
                        <Divider type="vertical" style={{ height: 16 }} />
                        <DropSelect
                            dropWidth={100}
                            inputCom={<Button
                                onClick={this.changeBackColor.bind(this, backColor)}
                                style={{ paddingBottom: 0, borderBottom: `5px solid ${backColor}`, fontSize: 12 }}
                                className="tool-btn"><i className="icon-mode-backcolor" /></Button>}
                            dropCom={<WeaColorPicker
                                customized={true}
                                onChange={this.changeBackColor}
                            >
                                <div className="toggle-icon-button mf-5">
                                    <i className="icon-coms-down2" />
                                </div>
                            </WeaColorPicker>}
                        />
                        <DropSelect
                            onChange={this.changeBorder}
                            options={lineArr}
                            dropWidth={100}
                            inputCom={<Button
                                onClick={this.changeForeColor.bind(this, foreColor)}
                                style={{ paddingBottom: 0, borderBottom: `5px solid ${foreColor}`, fontSize: 12 }}
                                className="tool-btn"><i className="icon-coms-text" /></Button>}
                            dropCom={<WeaColorPicker
                                customized={true}
                                onChange={this.changeForeColor}
                            >
                                <div className="toggle-icon-button mf-5">
                                    <i className="icon-coms-down2" />
                                </div>
                            </WeaColorPicker>}
                        />
                    </div>
                    <div className="tool-area-row" style={{ textAlign: 'center' }}>{getLabel('505909','字体')}</div>
                </div>
                <Divider type="vertical" />
                <div className="tool-area" style={{pointerEvents: toolAreaStyle}}>
                    <div className="tool-area-row">
                        <Button onClick={this.changeVAlign.bind(this, GC.Spread.Sheets.VerticalAlign.top)} className={`tool-btn${vAlign === GC.Spread.Sheets.VerticalAlign.top ? ' tool-btn-active' : ''}`} style={{ paddingBottom: 10, paddingTop: 0 }}><i className="icon-mode-align-middle" /></Button>
                        <Button onClick={this.changeVAlign.bind(this, GC.Spread.Sheets.VerticalAlign.center)} className={`tool-btn${vAlign === GC.Spread.Sheets.VerticalAlign.center ? ' tool-btn-active' : ''}`}><i className="icon-mode-align-middle" /></Button>
                        <Button onClick={this.changeVAlign.bind(this, GC.Spread.Sheets.VerticalAlign.bottom)} className={`tool-btn${vAlign === GC.Spread.Sheets.VerticalAlign.bottom ? ' tool-btn-active' : ''}`} style={{ paddingBottom: 0, paddingTop: 10 }}><i className="icon-mode-align-middle" /></Button>
                        <Divider type="vertical" style={{ height: 16 }} />
                        <Tooltip title={wordwrap ? getLabel('505927','取消自动换行') : getLabel('505928','自动换行')}>
                            <Button
                                onClick={this.changeWorkWrap}
                                className={`tool-btn${wordwrap ? ' tool-btn-active' : ''}`}
                            >
                                <i className="icon-mode-wordwrap" />
                            </Button>
                        </Tooltip>
                    </div>
                    <div className="tool-area-row">
                        <Button onClick={this.changeHAlign.bind(this, GC.Spread.Sheets.HorizontalAlign.left)} className={`tool-btn${hAlign === GC.Spread.Sheets.HorizontalAlign.left ? ' tool-btn-active' : ''}`} ><i className="icon-mode-align-left" /></Button>
                        <Button onClick={this.changeHAlign.bind(this, GC.Spread.Sheets.HorizontalAlign.center)} className={`tool-btn${hAlign === GC.Spread.Sheets.HorizontalAlign.center ? ' tool-btn-active' : ''}`}><i className="icon-mode-align-center" /></Button>
                        <Button onClick={this.changeHAlign.bind(this, GC.Spread.Sheets.HorizontalAlign.right)} className={`tool-btn${hAlign === GC.Spread.Sheets.HorizontalAlign.right ? ' tool-btn-active' : ''}`} ><i className="icon-mode-align-right" /></Button>
                        <Divider type="vertical" style={{ height: 16 }} />
                        <Tooltip title={spanCell ? getLabel('505929','拆分单元格') : getLabel('505930','合并单元格')}>
                            <Button
                                onClick={this.changeSpanCell}
                                className={`tool-btn${spanCell ? ' tool-btn-active' : ''}`}
                            >
                                <i className="icon-mode-combine-cell" />
                            </Button>
                        </Tooltip>
                    </div>
                    <div className="tool-area-row" style={{ textAlign: 'center' }}>{getLabel('502331', '对齐方式')}</div>
                </div>
                <Divider type="vertical" />
                {fieldVisible && [!setFieldTypeDisabled && <div className="tool-area" style={{pointerEvents: toolAreaStyle}}>
                    <div className="tool-area-row">
                        <Tooltip title={getLabel('502305', '文本')}>
                            <Button disabled={setFieldTypeDisabled} onClick={this.setInputTextField} className={`tool-btn${cellTypeName === 'text' ? ' tool-btn-active' : ''}`} ><i className="icon-coms-text" /></Button>
                        </Tooltip>
                        <Tooltip title={getLabel('502306', '整数')}>
                            <Button disabled={setFieldTypeDisabled} onClick={this.setInputIntField} className={`tool-btn${cellTypeName === 'int' ? ' tool-btn-active' : ''}`}><i style={{ marginTop: -10, fontSize: 16, marginBottom: -2 }} >0</i></Button>
                        </Tooltip>
                        <Tooltip title={getLabel('502307', '浮点数')}>
                            <Button disabled={setFieldTypeDisabled} onClick={this.setInputFloatField} className={`tool-btn${cellTypeName === 'float' ? ' tool-btn-active' : ''}`}  ><i style={{ marginTop: -10, fontSize: 16, marginBottom: -2 }}>0.1</i></Button>
                        </Tooltip>
                        <Divider type="vertical" style={{ height: 16 }} />
                        <Tooltip title={getLabel('502309', 'Check框')}>
                            <Button disabled={setFieldTypeDisabled} onClick={this.setCheckField} className={`tool-btn${cellTypeName === 'check' ? ' tool-btn-active' : ''}`}><i className="icon-coms-batch" /></Button>
                        </Tooltip>
                        <Tooltip title={getLabel('502310', '下拉框')}>
                            <Button disabled={setFieldTypeDisabled} onClick={this.setSelectField} className={`tool-btn${cellTypeName === 'select' ? ' tool-btn-active' : ''}`} ><i className="icon-coms-down" /></Button>
                        </Tooltip>

                    </div>
                    <div className="tool-area-row">
                        <Tooltip title={getLabel('502300', '人力资源')}>
                            <Button disabled={setFieldTypeDisabled} onClick={this.setBrowserHrmField} className={`tool-btn${cellTypeName === 'browser1' ? ' tool-btn-active' : ''}`} ><i className="icon-coms-HumanResources" /></Button>
                        </Tooltip>
                        <Tooltip title={getLabel('502298', '部门')}>
                            <Button disabled={setFieldTypeDisabled} onClick={this.setBrowserDptField} className={`tool-btn${cellTypeName === 'browser4' ? ' tool-btn-active' : ''}`} ><i className="icon-coms-Headquarters" /></Button>
                        </Tooltip>
                        <Tooltip title={getLabel('502299', '分部')}>
                            <Button disabled={setFieldTypeDisabled} onClick={this.setBrowserSubCompanyField} className={`tool-btn${cellTypeName === 'browser164' ? ' tool-btn-active' : ''}`} ><i className="icon-coms-LargeArea" /></Button>
                        </Tooltip>
                        <Tooltip title={getLabel('502297', '日期')}>
                            <Button disabled={setFieldTypeDisabled} onClick={this.setBrowserDateField} className={`tool-btn${cellTypeName === 'browser2' ? ' tool-btn-active' : ''}`}  ><i className="icon-coms-New-schedule" /></Button>
                        </Tooltip>

                        <Tooltip title={getLabel('502308', '浏览框')}>
                            <Button className="tool-btn" disabled={setFieldTypeDisabled} onClick={this.showBrowserInstance} onBlur={this.hideBrowserInstance()}>
                                <i className="icon-coms-search" />
                            </Button>
                            {/*  <Button className="tool-btn" disabled={setFieldTypeDisabled} onClick={this.showBrowserInstance}>
                                <i className="icon-coms-search" />
                                <WeaBrowser onChange={this.setBrowserField} style={{ display: 'none' }} ref={ref => this.browserInstance = ref} type="browserTypeList" />
                            </Button> */}
                        </Tooltip>
                        <WeaBrowser onChange={this.beforeSetBrowserField} hideSearch={true} ref={ref => this.browserInstance = ref} type="browserTypeList" />
                        <WeaBrowser onChange={this.beforesetCusBrowserField} ref={ref => this.cusBrowserInstance = ref}
                            type={this.state.cusBrowserType} hasAdvanceSerach title={this.state.broTitle} inputStyle={{ display: "none" }} isSingle={this.state.isSingle} />
                        {/* <Button onClick={this.changeCellType.bind(this, 'empty')} className={`tool-btn${cellTypeName === 'empty' ? ' tool-btn-active' : ''}`}><div style={{ width: 17, marginBottom: 1, border: '1px solid #eaeaea', height: 10, display: 'inline-block' }} /></Button>
                        <Button onClick={this.changeCellType.bind(this, 'input')} className={`tool-btn${cellTypeName === 'input' ? ' tool-btn-active' : ''}`}><i style={{ fontSize: 24 }} className="icon-mode-input" /></Button>
                        <Button onClick={this.changeCellType.bind(this, 'check')} className={`tool-btn${cellTypeName === 'check' ? ' tool-btn-active' : ''}`}><i style={{ fontSize: 24 }} className="icon-mode-checkbox" /></Button>
                        <Button onClick={this.changeCellType.bind(this, 'select')} className={`tool-btn${cellTypeName === 'select' ? ' tool-btn-active' : ''}`}><i style={{ fontSize: 24 }} className="icon-mode-select" /></Button>
                        <Button onClick={this.changeCellType.bind(this, 'browser')} className={`tool-btn${cellTypeName === 'browser' ? ' tool-btn-active' : ''}`}><i style={{ fontSize: 24 }} className="icon-mode-browser" /></Button> */}
                    </div>
                    <div className="tool-area-row" style={{ textAlign: 'center' }}>{getLabel('502332', '字段设置')}</div>
                </div>,
                !setFieldTypeDisabled && <Divider type="vertical" />,
                (!combineSameCellDisabled || (!combineSameCellDisabled && !isAutoFillinDisabled)) && <div className="tool-area" style={{pointerEvents: toolAreaStyle}}>
                    <div className="tool-area-row">
                        {!combineSameCellDisabled && <Tooltip title={getLabel('502333', '合并显示')}>
                            <Button onClick={this.setCellTypeProps.bind(this, 'combineSameCell', !combineSameCell)} className={`tool-btn${combineSameCell ? ' tool-btn-active' : ''}`} >
                                <i className="icon-mode-merge f14"></i>
                            </Button>
                        </Tooltip>}
                        {!combineSameCellDisabled && !isAutoFillinDisabled && <Tooltip title={getLabel('502334', '固定解析')} >
                            <Button
                                onClick={this.setAutoFillin}
                                className={`tool-btn${isAutoFillin ? ' tool-btn-active' : ''}`} >
                                <i className="icon-edc-common-orderedlist"></i>
                            </Button>
                        </Tooltip>}
                    </div>
                    <div className="tool-area-row">
                        <Button className="tool-btn">&nbsp;</Button>
                    </div>
                    <div className="tool-area-row" style={{ textAlign: 'center' }}>
                        {getLabel('502335', '显示设置')}
                    </div>
                </div>,
                (!combineSameCellDisabled || (!combineSameCellDisabled && !isAutoFillinDisabled)) && <Divider type="vertical" />,
                clearFieldDisabled ? null : <Button disabled={readonly} className="tool-btn tool-btn-large" onClick={this.props.clearContent} ><i className="icon-mode-delete" />{getLabel('502336', '清除字段')}</Button>,
                deleteTableDisabled ? null : <Button disabled={readonly} className="tool-btn tool-btn-large" onClick={deleteTable} ><i className="icon-mode-delete" />{getLabel('502337', '删除明细表')}</Button>,
                disabledSignFields ? null : <Button disabled={readonly} onClick={this.props.signFields} className="tool-btn tool-btn-large"><i className="icon-coms-Sign" />{getLabel('502338', '识别字段')}</Button>,
                <Button disabled={readonly} onClick={this.props.addDetailTable} className="tool-btn tool-btn-large"><i className="icon-mode-detail" />{getLabel('502339', '添加明细')}</Button>,
                    // <Button onClick={this.props.addNoDetailTable} className="tool-btn tool-btn-large"><i className="icon-mode-detail" />添加留白</Button>
                ]}
                <Button disabled={readonly} onClick={this.props.expandCell} className="tool-btn tool-btn-large" ><i className="icon-mode-column-width" />{getLabel('502311', '扩展表格')}</Button>
                <Divider type="vertical" />
                <Button disabled={readonly} onClick={this.props.save} className="tool-btn tool-btn-large mr-1" ><i className="icon-mode-save1" />{getLabel('30986', '保存')}</Button>
                {fieldVisible && <Button disabled={readonly} onClick={this.props.preview} className="tool-btn tool-btn-large" ><i className="icon-mode-desktop" />{getLabel('221', '预览')}</Button>}
                {formulaList.length > 0 ? <Popover
                    placement="bottomLeft"
                    trigger="click"
                    visible={formulaVisible}
                    onVisibleChange={showContent}
                    content={
                        <ul className="menu">
                            {formulaList.map(fu => (
                                <li className="menu-item" title={fu.describes}>
                                    <div className="text-elli" style={{ width: 160 }} onClick={() => { openAceEditor(fu) }}>
                                        {fu.describes}
                                    </div>
                                    <div className="menu-item-opts"><Icon type="delete" onClick={() => { deleteFormula(fu) }} title={getLabel(502286, '删除')}></Icon></div></li>
                            ))}
                            <li style={{ textAlign: 'center' }} ><Button onClick={openAceEditor} type="primary" icon="plus" shape="circle"></Button></li>
                        </ul>
                    }
                >

                    <Button disabled={readonly} className="tool-btn tool-btn-large" title={getLabel('502403', '自定义公式')}>
                        <Badge count={formulaList.length}>
                            <i title={getLabel('502403', '自定义公式')} className="icon-coms-html2" />
                        </Badge>
                        <div>{getLabel('502403', '自定义公式')}</div>
                    </Button>
                </Popover> : <Button disabled={readonly} onClick={openAceEditor} className="tool-btn tool-btn-large" title={getLabel('502403', '自定义公式')}>
                        <i className="icon-coms-html2" />
                        <div>{getLabel('502403', '自定义公式')}</div>
                    </Button>}
                    <Button disabled={readonly} onClick={openCodeEditor} className="tool-btn tool-btn-large mr-1" ><i className="icon-coms-html2" />{getLabel('505950','代码块')}</Button>
            </div >
        )
    }

    beforeSetBrowserField = (ids, names, valueObj) => {
        const { cusBrowserType, isSingle, broTitle } = this.state;
        if (ids == 161 || ids == 162) {
            this.setState({
                cusBrowserObjs: valueObj,
                cusBrowserType: "userDefindBrowserType",
                isSingle: true,
                broTitle: names,
            }, () => {
                if (this.cusBrowserInstance) {
                    this.cusBrowserInstance.openModal();
                }
            });

        } else if (ids == 256 || ids == 257) {
            this.setState({
                cusBrowserObjs: valueObj,
                cusBrowserType: "formmodeTreeData",
                isSingle: true,
                broTitle: names,
            }, () => {
                if (this.cusBrowserInstance) {
                    this.cusBrowserInstance.openModal();
                }
            });
        } else {
            this.setBrowserField(valueObj);
        }
    }

    beforesetCusBrowserField = (ids, names, valueObj) => {
        this.setBrowserField(this.state.cusBrowserObjs, valueObj);
    }
    showBrowserInstance = () => {
        if (this.browserInstance) {
            this.browserInstance.openModal();
        }
    }
    // 隐藏浏览框
    hideBrowserInstance = () => {
        if (this.browserInstance) {
            this.browserInstance.closeModal();
        }
    }

    setAutoFillin = () => {
        let { isAutoFillin, cellTypeName } = this.state;

        let { browserAutoFillin} = this.props;
        if (cellTypeName.indexOf("browser") == 0) {
            this.props.setFillInData(!isAutoFillin);
            // isAutoFillin = !browserAutoFillin;

            // this.setState({
            //     isAutoFillin: isAutoFillin
            // });


        } else {

            this.props.setSelectFillIn();

            // this.setState({
            //     isAutoFillin: !isAutoFillin
            // });
        }
       
        
    }
    setCellTypeProps = (key, value) => {
        this.setState({
            [key]: value
        }, () => {
            if (this.props.setCellTypeProps) {
                this.props.setCellTypeProps(key, value)
            }
        });
    }
    getShowListDatas = (oldFields, newFields) => {
        const [file] = newFields;
        if (file) {
            const fileInstance = file.getNative();
            if (typeof this.props.importFile === 'function') {
                this.props.importFile(fileInstance);
            }
        }
    }
    changeCellType = (fieldType) => {
        const cellTypeName = getCellTypeName(fieldType);
        this.setState({
            cellTypeName
        }, () => {
            if (typeof this.props.onChangeCellType === 'function') {
                this.props.onChangeCellType(fieldType);
            }
        })
    }
    changeSpanCell = () => {
        const value = !this.state.spanCell;
        this.setState({ spanCell: value }, () => {
            if (typeof this.props.onChange === 'function') {
                this.props.onChange({ cellSpan: value });
            }
        });
    }
    changeWorkWrap = () => {
        const value = !this.state.wordwrap;
        this.setState({ wordwrap: value }, () => {
            if (typeof this.props.onChange === 'function') {
                this.props.onChange({ wordwrap: value });
            }
        });
    }
    changeHAlign = (hAlign) => {
        this.setState({ hAlign }, () => {
            if (typeof this.props.onChange === 'function') {
                this.props.onChange({ hAlign });
            }
        });
    }
    changeVAlign = (vAlign) => {
        this.setState({ vAlign }, () => {
            if (typeof this.props.onChange === 'function') {
                this.props.onChange({ vAlign });
            }
        });
    }
    changeForeColor = (foreColor) => {
        this.setState({
            foreColor
        }, () => {
            if (typeof this.props.onChange === 'function') {
                this.props.onChange({ foreColor });
            }
        })
    }
    changeBackColor = (backColor) => {
        this.setState({
            backColor
        }, () => {
            if (typeof this.props.onChange === 'function') {
                this.props.onChange({ backColor });
            }
        })
    }
    getBorder = (border = BorderType.None) => {
        let icon = 'icon-mode-wubiankuang';
        lineArr.forEach(d => {
            if (d.id === border) {
                icon = d.icon;
            }
        })
        return icon;
    }
    changeBorder = (border) => {
        this.setState({
            border
        }, () => {
            if (typeof this.props.onChange === 'function') {
                this.props.onChange({ border });
            }
        });
    }
    changeUnderline = () => {
        const value = !this.state.underline;
        this.setState({
            underline: value
        }, () => {
            if (typeof this.props.onChange === 'function') {
                this.props.onChange({ underline: value ? 'underline' : '' });
            }
        });
    }
    changeBold = () => {
        const value = !this.state.bold;
        this.setState({
            bold: value
        }, () => {
            if (typeof this.props.onChange === 'function') {
                this.props.onChange({ bold: value ? 'bold' : '' });
            }
        });
    }
    changeItalic = () => {
        const value = !this.state.italic;
        this.setState({
            italic: value
        }, () => {
            if (typeof this.props.onChange === 'function') {
                this.props.onChange({ italic: value ? 'italic' : '' });
            }
        });
    }
    changeFontSize = (fontSize) => {
        this.setState({
            fontSize
        }, () => {
            if (typeof this.props.onChange === 'function') {
                this.props.onChange({ fontSize });
            }
        })
    }
    upFontSize = () => {
        let fontSize = Number(this.state.fontSize) + 1;
        if (fontSize > 70) {
            fontSize = 70;
        }
        this.setState({
            fontSize
        }, () => {
            if (typeof this.props.onChange === 'function') {
                this.props.onChange({ fontSize });
            }
        })
    }

    downFontSize = () => {
        let fontSize = this.state.fontSize - 1;
        if (fontSize < 10) {
            fontSize = 10;
        }

        this.setState({
            fontSize
        }, () => {
            if (typeof this.props.onChange === 'function') {
                this.props.onChange({ fontSize });
            }
        })
    }

    changeFontFamily = (fontFamily) => {
        this.setState({
            fontFamily
        }, () => {
            if (typeof this.props.onChange === 'function') {
                this.props.onChange({ fontFamily });
            }
        })
    }
}